<template>
	<view class="category">
		<!-- 顶部搜索商品 -->
		<view class="header">
			 搜索商品
		</view>
		<view class="bottom">
			<view class="left">
				 <view class="item" v-for="(item,index) in goodArr" :key="item.id" :class="{active:index==currentIndex}" @click="changeIndex(index)">
					{{item.name}}
				 </view>
			</view>
			<view class="right">
				<scroll-view scroll-y="true" class="scroll">
					 <image :src="showData.imgUrl" class="img"></image>
					 <view class="goods">
					 	 <view class="good" v-for="(item,index) in showData.subCateList" :key="item.id">
					 	 	<image :src="item.wapBannerUrl" mode=""></image>
							<text>{{item.name}}</text>
					 	 </view>
					 </view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>


<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				currentIndex:0
			};
		},
		//发请求
		mounted() {
			this.$store.dispatch("getCategory");
		},
		computed:{
			...mapState({
				goodArr:state=>state.category.goodArr
			}),
			showData(){
				return this.goodArr[this.currentIndex];
			}
		},
		methods:{
			changeIndex(index){
				this.currentIndex = index;
			}
		}
	}
</script>

<style lang="stylus">
	.category
		width: 100%
		height: 100%
		.header
			width: 80%
			height: 60rpx
			background: #fcb
			margin: 10rpx auto
			text-align: center
			line-height: 60rpx
		.bottom
			display: flex
			border-top: 2rpx solid #fcb
			.left 
				flex:2;
				.item
					width:100%
					height: 80rpx;
					text-align: center
					line-height: 80rpx
				.active
					background: green
					color: white
			.right
				flex:8
				border-left: 2rpx solid #bcf
				height: calc(100vh - 60rpx)
				.scroll
					width: 100%
					height: calc(100vh - 60rpx)
					.img
						width: 80%
						margin: 20rpx auto
						display: block
						height: 190rpx
					.goods
						display: flex
						flex-wrap: wrap
						.good
							width: 33%
							display: flex
							flex-direction: column
							align-items: center
							image
								width: 100%
								height: 144rpx;
							text
								font-size: 28rpx;
					
</style>
